import React, { PureComponent } from 'react';
import { cloneDeep } from 'lodash';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Row, Col, Select, Button, Spin, message } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { isRepeat } from '@/utils/utils';
import HOCSelect from '@/components/AntDesign/Select';

const FormItem = Form.Item;
const { Option } = Select;
@connect(({ businessscope, loading }) => ({
  businessscope,
  loading: loading.effects['businessscope/fetchDetail']
    ? loading.effects['businessscope/fetchDetail']
    : false,
  groupLodinging:
    loading.effects['businessscope/fetchInsLsPkgName'] ||
    loading.effects['businessscope/fetchAccuLsPkgName'],
  saveLoading: loading.effects['businessscope/fetchSave'],
}))
@Form.create()
class busiScopeAdd extends PureComponent {
  state = {};

  componentDidMount() {
    const { dispatch } = this.props;
    const parameter = {
      supplyNameList: [],
      productList: [],
      suppList: [
        {
          id: 0,
          areaId: '', // 地区
          prodList: '', // 产品
          insAddDeadline: '', // 社保增员截止日期
          insDelDeadline: '', // 社保减员截止日期
          insLsPkgIdList: '', // 社保组合
          accuAddDeadline: '', // 公积金增员截止日期
          accuDelDeadline: '', // 公积金减员截止日期
          accuLsPkgIdList: '', // 公积金组合

          pensAddDeadline: '', // 养老增员截止日
          pensDelDeadline: '', // 养老减员截止日

          unempAddDeadline: '', // 失业增员截止日
          unempDelDeadline: '', // 失业减员截止日

          injAddDeadline: '', // 工伤增员截止日
          injDelDeadline: '', // 工伤减员截止日

          birthAddDeadline: '', // 生育增员截止日
          birthDelDeadline: '', // 生育减员截止日
          medAddDeadline: '', // 医疗增员截止日
          medDelDeadline: '', // 医疗减员截止日
          insUnifyFlag: undefined,
          accuShow: false,
          insShow: false,
          // 社保组合
          insGroupList: [],
          accGroupList: [],
        },
      ],
      areaList: [],
      allProductList: [],
      suppId: undefined,
      selectAreaId: undefined,
      index: 0,
    };
    dispatch({
      type: 'businessscope/updateModelData',
      payload: parameter,
    });
    // 供应商名称列表
    const { location } = this.props;
    dispatch({
      type: 'businessscope/fetchSuppList',
      payload: {},
    });
    const { suppId, name, corpId } = location.query;
    dispatch({
      type: 'businessscope/updateModelData',
      payload: { name, corpId },
    });
    this.setState({ suppIds: suppId });
    // 详情
    if (suppId) {
      dispatch({
        type: 'businessscope/fetchDetail',
        payload: { suppId },
      });
    }
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const parameter = {
      supplyNameList: [],
      productList: [],
      suppList: [
        {
          id: 0,
          areaId: '', // 地区
          prodList: '', // 产品
          insAddDeadline: '', // 社保增员截止日期
          insDelDeadline: '', // 社保减员截止日期
          insLsPkgIdList: '', // 社保组合
          accuAddDeadline: '', // 公积金增员截止日期
          accuDelDeadline: '', // 公积金减员截止日期
          accuLsPkgIdList: '', // 公积金组合

          pensAddDeadline: '', // 养老增员截止日
          pensDelDeadline: '', // 养老减员截止日

          unempAddDeadline: '', // 失业增员截止日
          unempDelDeadline: '', // 失业减员截止日

          injAddDeadline: '', // 工伤增员截止日
          injDelDeadline: '', // 工伤减员截止日

          birthAddDeadline: '', // 生育增员截止日
          birthDelDeadline: '', // 生育减员截止日
          medAddDeadline: '', // 医疗增员截止日
          medDelDeadline: '', // 医疗减员截止日
          insUnifyFlag: undefined,
          accuShow: false,
          insShow: false,
          // 社保组合
          insGroupList: [],
          accGroupList: [],
        },
      ],
      areaList: [],
      allProductList: [],
      suppId: undefined,
      selectAreaId: undefined,
      index: 0,
    };
    dispatch({
      type: 'businessscope/updateModelData',
      payload: parameter,
    });
  }

  // 服务产品
  onSelectPdList = (value, options) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'businessscope/fetchPdList',
      payload: { corpId: options.key },
    });
  };

  // 新增
  addContact = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'businessscope/getAddFrom',
      payload: {},
    });
  };

  // 删除
  deleteContact = (index, id) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'businessscope/getDelFrom',
      payload: id,
    });
  };

  // 获取地址
  search = value => {
    const { dispatch } = this.props;
    if (value.trim().length) {
      this.setState({ fetching: true });
      dispatch({
        type: 'businessscope/fetchAreaList',
        payload: { areaName: value },
      });
    } else {
      this.setState({ fetching: false });
    }
  };

  handleChange = (value, id, areaId) => {
    const { dispatch, businessscope, form } = this.props;
    const newValue = [...value];
    if (!areaId) {
      return message.warning('请先选择地区！');
    }
    businessscope.suppList.forEach(item => {
      if ((item.busiScopeId || item.id) === id) {
        // eslint-disable-next-line no-param-reassign
        item.prodLists = [...value];
        form.setFieldsValue({ [`suppBusiScopeList[${id}][prodList]`]: value });
      }
    });
    // 选择服务产品，判断是否五险合一
    dispatch({
      type: 'businessscope/fetchAreaPlcyParam',
      payload: { value: areaId, id },
    });

    // 是否存在社保产品
    if (newValue.indexOf('PDINF_0000000001') !== -1) {
      dispatch({
        type: 'businessscope/getHas',
        payload: { id, flag: 'ins' },
      });
    } else {
      dispatch({
        type: 'businessscope/getHasFalse',
        payload: { id, flag: 'ins' },
      });
    }
    // 是否存在公积金产品
    if (newValue.indexOf('PDINF_0000000002') !== -1) {
      dispatch({
        type: 'businessscope/getHas',
        payload: { id, flag: 'accu' },
      });
    } else {
      dispatch({
        type: 'businessscope/getHasFalse',
        payload: { id, flag: 'accu' },
      });
    }
    return true;
  };

  // 取消
  cancel = () => {
    router.push('/supplymanage/busiscope/index');
  };

  // 模糊搜索
  getData = (value, index, id) => {
    const { dispatch, form } = this.props;
    // 地区改变 清空增加的内容
    dispatch({
      type: 'businessscope/getFormChange',
      payload: { id },
    });

    form.resetFields([`suppBusiScopeList[${id}][prodList]`]);
    // 根据地区判断是否五险合一
    dispatch({
      type: 'businessscope/fetchAreaPlcyParam',
      payload: { value: value.key, id },
    });
  };

  onSocialGroup = id => {
    this.getInsList(id);
  };

  onAccuGroup = id => {
    this.getAccList(id);
  };

  // 获取社保组合
  getInsList = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'businessscope/fetchInsLsPkgName',
      payload: { id },
    });
  };

  // 获取公积金组合
  getAccList = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'businessscope/fetchAccuLsPkgName',
      payload: { id },
    });
  };

  // 提交 如果未配置五险是否合一不能提交
  submitAll = () => {
    const { form, dispatch, businessscope } = this.props;
    form.validateFieldsAndScroll({ focus: true }, (err, values) => {
      const arr = [];
      Object.entries(values.suppBusiScopeList).forEach(([key, value]) => {
        const temp = value;
        if (key.length > 5) {
          if (value.areaId) {
            temp.areaId = value.areaId.key;
            arr.push({ ...value, busiScopeId: key });
          }
        } else if (value.areaId) {
          temp.areaId = value.areaId.key;
          arr.push({ ...value });
        }
      });
      if (isRepeat(arr, 'areaId')) {
        message.warning('所选地区重复，请重新选择！');
        return;
      }
      const tempValues = cloneDeep(arr);
      const insUnifyFlag = businessscope.suppList.some(item => item.insUnifyFlag === undefined);
      let insFlag = null;
      tempValues.forEach(item => {
        insFlag = item.prodList.some(it => String(it) === 'PDINF_0000000001');
      });
      if (insUnifyFlag && insFlag) {
        message.warning('所选地区有未配置是否五险合一，请重新选择！');
        return;
      }
      const submitValues = tempValues.map(item => {
        const newItem = cloneDeep(item);
        const prList = [];

        businessscope.suppList.forEach((b, c) => {
          if (item.areaId === b.areaId) {
            /* eslint-disable no-unused-expressions */
            businessscope?.suppList[c]?.prodLists?.forEach(s => {
              let obj;
              businessscope?.suppList[c]?.allProductList?.forEach(h => {
                // 原代码
                // if (s.indexOf('PDINF_000000') > -1 || s.indexOf('PDEFINED_010000') > -1) {
                // 选中含有的产品id
                // if (String(s) === String(h.pdId)) {
                // obj = {
                //   pdId: h.pdId,
                //   pdCate:
                //     String(h.pdId) === 'PDINF_0000000001' ||
                //       String(h.pdId) === 'PDINF_0000000002'
                //       ? h.pdCate
                //       : h.pdCate || 50,
                // };
                // }

                // 直接匹配id是否相等
                if (String(s) === String(h.pdId)) {
                  obj = {
                    pdId: h.pdId,
                    pdCate:
                      String(h.pdId) === 'PDINF_0000000001' || String(h.pdId) === 'PDINF_0000000002'
                        ? h.pdCate
                        : h.pdCate || 50,
                  };
                } else if (String(s) === String(h.pdName)) {
                  // 产品下拉没有，中文显示
                  obj = {
                    pdId: h.pdId,
                    pdCate:
                      String(h.pdId) === 'PDINF_0000000001' || String(h.pdId) === 'PDINF_0000000002'
                        ? h.pdCate
                        : h.pdCate || 50,
                  };
                }
              });
              if (obj) {
                prList.push(obj);
              }
            });
            newItem.prodList = prList;
            newItem.prodIdList = [...businessscope.suppList[c].prodLists];
          }
        });
        return newItem;
      });
      if (!err) {
        dispatch({
          type: 'businessscope/fetchSave',
          payload: { suppBusiScopeList: submitValues, suppId: values.suppId },
        });
      }
    });
  };

  render() {
    const { form, businessscope, groupLodinging, loading, saveLoading } = this.props;
    const { getFieldDecorator } = form;
    const { fetching, suppIds } = this.state;
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };
    // 社保公积金截止日(1-31)
    const arrList = [];
    for (let i = 1; i < 32; i += 1) {
      arrList.push(i);
    }
    // 社保公积金截止日(1-31)
    const optionsList = arrList.map(options => <Option key={options}>{options}</Option>);
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 8,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
    };
    const areaDom = item => {
      if (item.suppId) {
        return item.areaList.map(value => <Option key={value.areaId}>{value.areaName}</Option>);
      }
      return businessscope.areaList.map(value => (
        <Option key={value.areaId}>{value.areaName}</Option>
      ));
    };

    return (
      <PageHeaderWrapper>
        <Spin tip="loading..." spinning={loading}>
          <div>
            <Card title={<span>{suppIds ? '修改业务范围' : '新增业务范围'}</span>}>
              <Form>
                <Row gutter={64}>
                  <Col offset={7} {...colProps}>
                    <FormItem {...formItemLayout} label="供应商名称">
                      {getFieldDecorator('suppId', {
                        rules: [{ required: true, message: '请输入' }],
                        initialValue: suppIds ? businessscope.name : undefined,
                      })(
                        <Select
                          placeholder="请输入关键字检索"
                          allowClear
                          showSearch
                          optionFilterProp="children"
                          onSelect={(value, options) => this.onSelectPdList(value, options)}
                          style={{ width: '300px' }}
                          disabled={!!businessscope.suppId}
                        >
                          {businessscope.supplyNameList.map(options => (
                            <Option value={options.suppId} key={options.corpId}>
                              {options.name}
                            </Option>
                          ))}
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                </Row>
              </Form>
            </Card>
            <Form layout="vertical">
              <Card>
                {businessscope.suppList.map((item, index) => (
                  <div key={item.busiScopeId || item.id} style={{ position: 'relative' }}>
                    <Row gutter={64}>
                      {businessscope.suppList.length > 1 && (
                        <div style={{ position: 'absolute', right: 21, top: -10 }}>
                          <DeleteOutlined
                            className="dynamic-delete-button"
                            style={{ fontSize: '16px', lineHeight: '12px' }}
                            onClick={() => this.deleteContact(index, item.busiScopeId || item.id)}
                          />
                        </div>
                      )}

                      <Col {...colProps}>
                        <FormItem label="选择地区">
                          {getFieldDecorator(
                            `suppBusiScopeList[${item.busiScopeId || item.id}][areaId]`,
                            {
                              rules: [{ required: true, message: '请输入' }],
                              initialValue: item.areaInfo || undefined,
                            }
                          )(
                            <HOCSelect
                              placeholder="请输入关键字检索"
                              style={{ width: '100%' }}
                              labelInValue
                              showSearch
                              showArrow={false}
                              filterOption={false}
                              onSearch={this.search}
                              onSelect={value =>
                                this.getData(value, index, item.busiScopeId || item.id)
                              }
                              notFoundContent={fetching ? <Spin size="small" /> : null}
                              disabled={!!item.suppId}
                              defaultActiveFirstOption={false}
                            >
                              {areaDom(item)}
                            </HOCSelect>
                          )}
                        </FormItem>
                      </Col>
                      <Col {...colProps} style={{ height: 'auto' }}>
                        <FormItem label="服务产品">
                          {getFieldDecorator(
                            `suppBusiScopeList[${item.busiScopeId || item.id}][prodList]`,
                            {
                              rules: [{ required: true, message: '请选择' }],
                              initialValue: item.prodLists || undefined,
                            }
                          )(
                            <HOCSelect
                              placeholder="请选择"
                              mode="multiple"
                              onChange={value =>
                                this.handleChange(value, item.busiScopeId || item.id, item.areaId)
                              }
                            >
                              {businessscope.productList.map(pd => (
                                <Option key={pd.pdId}>{pd.pdName}</Option>
                              ))}
                            </HOCSelect>
                          )}
                        </FormItem>
                      </Col>
                      {businessscope.suppList[index].insShow &&
                      businessscope.suppList[index].insUnifyFlag === 1 ? (
                        <Col {...colProps}>
                          <FormItem label="社保增员截止日">
                            {getFieldDecorator(
                              `suppBusiScopeList[${item.busiScopeId || item.id}][insAddDeadline]`,
                              {
                                rules: [{ required: true, message: '请输入' }],
                                initialValue: item.insAddDeadline || undefined,
                              }
                            )(
                              <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                {optionsList}
                              </HOCSelect>
                            )}
                          </FormItem>
                        </Col>
                      ) : null}
                      {businessscope.suppList[index].insShow &&
                      businessscope.suppList[index].insUnifyFlag === 2 ? (
                        <Col {...colProps}>
                          <FormItem label="养老增员截止日">
                            {getFieldDecorator(
                              `suppBusiScopeList[${item.busiScopeId || item.id}][pensAddDeadline]`,
                              {
                                rules: [{ required: true, message: '请输入' }],
                                initialValue: item.pensAddDeadline || undefined,
                              }
                            )(
                              <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                {optionsList}
                              </HOCSelect>
                            )}
                          </FormItem>
                        </Col>
                      ) : null}
                    </Row>

                    {businessscope.suppList[index].insShow &&
                    businessscope.suppList[index].insUnifyFlag === 2 ? (
                      <div>
                        <Row gutter={64}>
                          <Col {...colProps}>
                            <FormItem label="养老减员截止日">
                              {getFieldDecorator(
                                `suppBusiScopeList[${item.busiScopeId ||
                                  item.id}][pensDelDeadline]`,
                                {
                                  rules: [{ required: true, message: '请选择' }],
                                  initialValue: item.pensDelDeadline || undefined,
                                }
                              )(
                                <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                  {optionsList}
                                </HOCSelect>
                              )}
                            </FormItem>
                          </Col>
                          <Col {...colProps} style={{ height: 'auto' }}>
                            <FormItem label="失业增员截止日">
                              {getFieldDecorator(
                                `suppBusiScopeList[${item.busiScopeId ||
                                  item.id}][unempAddDeadline]`,
                                {
                                  rules: [{ required: true, message: '请选择' }],
                                  initialValue: item.unempAddDeadline || undefined,
                                }
                              )(
                                <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                  {optionsList}
                                </HOCSelect>
                              )}
                            </FormItem>
                          </Col>
                          <Col {...colProps}>
                            <FormItem label="失业减员截止日">
                              {getFieldDecorator(
                                `suppBusiScopeList[${item.busiScopeId ||
                                  item.id}][unempDelDeadline]`,
                                {
                                  rules: [{ required: true, message: '请选择' }],
                                  initialValue: item.unempDelDeadline || undefined,
                                }
                              )(
                                <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                  {optionsList}
                                </HOCSelect>
                              )}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row gutter={64}>
                          <Col {...colProps}>
                            <FormItem label="工伤增员截止日">
                              {getFieldDecorator(
                                `suppBusiScopeList[${item.busiScopeId || item.id}][injAddDeadline]`,
                                {
                                  rules: [{ required: true, message: '请选择' }],
                                  initialValue: item.injAddDeadline || undefined,
                                }
                              )(
                                <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                  {optionsList}
                                </HOCSelect>
                              )}
                            </FormItem>
                          </Col>
                          <Col {...colProps} style={{ height: 'auto' }}>
                            <FormItem label="工伤减员截止日">
                              {getFieldDecorator(
                                `suppBusiScopeList[${item.busiScopeId || item.id}][injDelDeadline]`,
                                {
                                  rules: [{ required: true, message: '请选择' }],
                                  initialValue: item.injDelDeadline || undefined,
                                }
                              )(
                                <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                  {optionsList}
                                </HOCSelect>
                              )}
                            </FormItem>
                          </Col>
                          <Col {...colProps}>
                            <FormItem label="生育增员截止日">
                              {getFieldDecorator(
                                `suppBusiScopeList[${item.busiScopeId ||
                                  item.id}][birthAddDeadline]`,
                                {
                                  rules: [{ required: true, message: '请选择' }],
                                  initialValue: item.birthAddDeadline || undefined,
                                }
                              )(
                                <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                  {optionsList}
                                </HOCSelect>
                              )}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row gutter={64}>
                          <Col {...colProps}>
                            <FormItem label="生育减员截止日">
                              {getFieldDecorator(
                                `suppBusiScopeList[${item.busiScopeId ||
                                  item.id}][birthDelDeadline]`,
                                {
                                  rules: [{ required: true, message: '请选择' }],
                                  initialValue: item.birthDelDeadline || undefined,
                                }
                              )(
                                <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                  {optionsList}
                                </HOCSelect>
                              )}
                            </FormItem>
                          </Col>
                          <Col {...colProps} style={{ height: 'auto' }}>
                            <FormItem label="医疗增员截止日">
                              {getFieldDecorator(
                                `suppBusiScopeList[${item.busiScopeId || item.id}][medAddDeadline]`,
                                {
                                  rules: [{ required: true, message: '请选择' }],
                                  initialValue: item.medAddDeadline || undefined,
                                }
                              )(
                                <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                  {optionsList}
                                </HOCSelect>
                              )}
                            </FormItem>
                          </Col>
                          <Col {...colProps}>
                            <FormItem label="医疗减员截止日">
                              {getFieldDecorator(
                                `suppBusiScopeList[${item.busiScopeId || item.id}][medDelDeadline]`,
                                {
                                  rules: [{ required: true, message: '请选择' }],
                                  initialValue: item.medDelDeadline || undefined,
                                }
                              )(
                                <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                  {optionsList}
                                </HOCSelect>
                              )}
                            </FormItem>
                          </Col>
                        </Row>
                      </div>
                    ) : null}

                    <Row gutter={64}>
                      {businessscope.suppList[index].insShow &&
                      businessscope.suppList[index].insUnifyFlag === 1 ? (
                        <Col {...colProps}>
                          <FormItem label="社保减员截止日">
                            {getFieldDecorator(
                              `suppBusiScopeList[${item.busiScopeId || item.id}][insDelDeadline]`,
                              {
                                rules: [{ required: true, message: '请选择' }],
                                initialValue: item.insDelDeadline || undefined,
                              }
                            )(
                              <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                {optionsList}
                              </HOCSelect>
                            )}
                          </FormItem>
                        </Col>
                      ) : null}
                      {businessscope.suppList[index].insShow &&
                      businessscope.suppList[index].insUnifyFlag ? (
                        <Col {...colProps}>
                          <FormItem label="社保组合">
                            {getFieldDecorator(
                              `suppBusiScopeList[${item.busiScopeId || item.id}][insLsPkgIdList]`,
                              {
                                rules: [{ required: true, message: '请选择' }],
                                initialValue:
                                  item.insLsPkgIdList && item.insLsPkgIdList.length
                                    ? item.insLsPkgIdList
                                    : undefined,
                              }
                            )(
                              <HOCSelect
                                placeholder="请选择"
                                mode="multiple"
                                onFocus={() => this.onSocialGroup(item.busiScopeId || item.id)}
                                notFoundContent={groupLodinging ? <Spin size="small" /> : null}
                              >
                                {item.insGroupList &&
                                  item.insGroupList.length &&
                                  item.insGroupList.map(itemIns => (
                                    <Option key={itemIns.insLsPkgId}>{itemIns.insLsPkgName}</Option>
                                  ))}
                              </HOCSelect>
                            )}
                          </FormItem>
                        </Col>
                      ) : null}

                      {businessscope.suppList[index].accuShow ? (
                        <Col {...colProps}>
                          <FormItem label="公积金增员截止日">
                            {getFieldDecorator(
                              `suppBusiScopeList[${item.busiScopeId || item.id}][accuAddDeadline]`,
                              {
                                rules: [{ required: true, message: '请选择' }],
                                initialValue: item.accuAddDeadline || undefined,
                              }
                            )(
                              <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                {optionsList}
                              </HOCSelect>
                            )}
                          </FormItem>
                        </Col>
                      ) : null}

                      {businessscope.suppList[index].insUnifyFlag === 1 &&
                      businessscope.suppList[index].insShow ? (
                        <div style={{ clear: 'both' }} />
                      ) : null}
                      {businessscope.suppList[index].accuShow ? (
                        <Col {...colProps}>
                          <FormItem label="公积金减员截止日">
                            {getFieldDecorator(
                              `suppBusiScopeList[${item.busiScopeId || item.id}][accuDelDeadline]`,
                              {
                                rules: [{ required: true, message: '请选择' }],
                                initialValue: item.accuDelDeadline || undefined,
                              }
                            )(
                              <HOCSelect placeholder="请选择" style={{ height: '32px' }}>
                                {optionsList}
                              </HOCSelect>
                            )}
                          </FormItem>
                        </Col>
                      ) : null}
                      {businessscope.suppList[index].insUnifyFlag === 2 &&
                      businessscope.suppList[index].insShow ? (
                        <div style={{ clear: 'both' }} />
                      ) : null}
                      {businessscope.suppList[index].accuShow ? (
                        <Col {...colProps}>
                          <FormItem label="公积金组合">
                            {getFieldDecorator(
                              `suppBusiScopeList[${item.busiScopeId || item.id}][accuLsPkgIdList]`,
                              {
                                rules: [{ required: true, message: '请选择' }],
                                initialValue:
                                  item.accuLsPkgIdList && item.accuLsPkgIdList.length
                                    ? item.accuLsPkgIdList
                                    : undefined,
                              }
                            )(
                              <HOCSelect
                                placeholder="请选择"
                                mode="multiple"
                                onFocus={() => this.onAccuGroup(item.busiScopeId || item.id)}
                                notFoundContent={groupLodinging ? <Spin size="small" /> : null}
                              >
                                {item.accGroupList &&
                                  item.accGroupList.length &&
                                  item.accGroupList.map(itemIns => (
                                    <Option key={itemIns.accuLsPkgId}>
                                      {itemIns.accuLsPkgName}
                                    </Option>
                                  ))}
                              </HOCSelect>
                            )}
                          </FormItem>
                        </Col>
                      ) : null}
                    </Row>
                    {businessscope.suppList.length > 1 ? (
                      <div style={{ marginBottom: '16px', borderBottom: '1px solid #e8e8e8' }} />
                    ) : (
                      ''
                    )}
                  </div>
                ))}

                <Button
                  style={{ width: '100%', marginBottom: 8 }}
                  type="dashed"
                  icon={<PlusOutlined />}
                  onClick={this.addContact}
                >
                  新增
                </Button>
              </Card>
            </Form>
          </div>
        </Spin>
        <FooterToolbar>
          <Button onClick={this.cancel} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button type="primary" onClick={this.submitAll} loading={saveLoading}>
            提交
          </Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default busiScopeAdd;
